<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="scroll" style="height: 200px; overflow-y: auto"></div>
<script>
    const scrollEle = document.getElementById('scroll')
    let i = 1
    let locked = false
    let timer = null
    scrollEle.addEventListener('scroll', function (e) {
        timer && clearTimeout(timer)
        if (Math.ceil(scrollEle.scrollTop + scrollEle.offsetHeight)  === scrollEle.scrollHeight) {
            locked= false
        } else {
            locked = true
            timer = setTimeout(() => {
                locked = false
            }, 10000) // 10秒钟不动的话，就继续自动滚动
        }
    })

    setInterval(() => {
        scrollEle.innerHTML += `<p>test test test test test test test test test test test test ${i}</p>`
        i++
        if (!locked) {
            scrollEle.scrollTop = scrollEle.scrollHeight
        }
    }, 500)

</script>
</body>
</html>